@import "../../Master/index";

.OrderDetails {
  .Masterfun();
  height: 100%;
  border-bottom: 6rem;
  background-color: @MasterFA;
  .bodys {
    width: 100%;
    background-color: #fff;
    position: relative;
    z-index: 150;
    &:before {
      content: '';
      position: absolute;
      bottom: -1rem;
      left: 0;
      z-index: 130;
      width: 100%;
      height: 2rem;
      background: url("../../../../assets/img/OrderDetails/Lower.png") no-repeat;
      background-size: 100%;
    }
    .head {
      //box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);
      padding: 2rem;
      .budy {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .img {
          img {
            width: 8rem;
            border-radius: .3rem;
          }
        }
        .text {
          //height: 8rem;
          //display: flex;
          //flex-direction: column;
          //justify-content: start;
          //align-items: flex-end;
          margin-left: 1rem;
          p {
            line-height: 3rem;
          }
          p:first-child {
            display: flex;
            justify-content: start;
            align-self: flex-start;
            //line-height: 4rem;
            color: @Master27;
            font-size: @fontSize18;
          }
          p:last-child {
            color: @Master62;
            text-align: left;
            font-size: 1.2rem;
            span {
            }
            span:last-child {
              color: @Masternewred;
            }
          }
        }
      }
      .Details {
        width: 100%;
        font-size: 1.6rem;
        margin-top: 2rem;
        div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          line-height: 3rem;
          div {
            color: @Master27;
          }
          .ostr {
            color: @Masternewred;
            font-weight: 600;
          }
        }
      }
    }
  }
  .Lower {
    margin-top: 1rem;
    background-color: #fff;
    text-align: left;
    padding: 1rem 2rem;
    .title {
      font-size: @fontSize18;
      color: @Master27;
      margin-bottom: .5rem;
      margin-top: .5rem;
    }
    .desqw {
      margin-top: 2rem;
    }
    .dess {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: @fontSize12;
      color: @Master62;
      div:first-child {
        line-height: 2.8rem;
        position: relative;
        left: 2rem;
        &:before {
          content: '';
          position: absolute;
          left: -2rem;
          top: 50%;
          margin-top: -.8rem;
          width: 1.8rem;
          height: 1.8rem;
          background: url("../../../../assets/img/OrderDetails/invalid-name.svg") no-repeat;
          background-size: 100%;

        }
      }
      div:last-child {
        width: 1.8rem;
        height: 1.8rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
        background-color: @Mastergreen;
        i {
          color: #fff;
          font-size: .7rem;
        }
      }
    }
    .textarea {
      margin-bottom: 4rem;
      textarea {
        -webkit-appearance: none;
        margin: auto;
        background-color: @MasterFA;
        width: 100%;
        box-sizing: border-box;
        height: 15rem;
        border-color: #DFE3E6;
        border-radius: .5rem;
        padding: 1rem;
        font-size: @fontSize12;
        color: #C2C9CC;
        &:focus {
          color: #354045;
        }
      }
    }
  }
}
